<template>
	<view>
		<u-navbar title="结算详情" :background="navbarBg" title-color="#fff" :border-bottom="false" back-icon-color="#fff"></u-navbar>
		<view class="container" :class="detail.reviewable ? '' : 'no-btn'" v-if="detail">
			<view class="box">
				<view class="title">订单信息</view>
				<view class="list">
					<view class="item">
						<text class="label">订单编号：</text>
						<text class="value u-line-1">{{detail.num}}</text>
					</view>
					<view class="item">
						<text class="label">标题：</text>
						<text class="value u-line-1">{{detail.title}}</text>
					</view>
					<view class="item">
						<text class="label">发起时间：</text>
						<text class="value u-line-1">{{detail.createTime}}</text>
					</view>
					<view class="item">
						<text class="label">预算量：</text>
						<text class="value u-line-1">{{detail.totalBudget}}t</text>
					</view>
					<view class="item">
						<text class="label">浇筑部位：</text>
						<text class="value u-line-1">{{detail.locationName}}</text>
					</view>
				</view>
			</view>
			
			<view class="box">
				<view class="title">结算明细</view>
				<view class="list">
					<!-- <view class="item">
						<text class="label">结算单编号：</text>
						<text class="value u-line-1">2021061638848</text>
					</view> -->
					<view class="item">
						<text class="label">供应商单位：</text>
						<text class="value u-line-1">{{detail.supplierName}}</text>
					</view>
					<view class="item">
						<text class="label">收货时间：</text>
						<text class="value u-line-1">{{detail.supplyTime}}</text>
					</view>
					<view class="item">
						<text class="label">物料类型：</text>
						<text class="value u-line-1">{{detail.skuName}}</text>
					</view>
				</view>
				
				<view class="line"></view>
				
				<view class="concrete-list">
					<view class="summary">
						<text class="t">收料总计：</text>
						<text class="v">{{detail.actualTotalWeight}}t</text>
					</view>
				</view>
			</view>
			
			<view class="box">
				<view class="title">审批流程</view>
				<view class="timeline">
					<u-time-line>
						<u-time-line-item v-for="(item,index) in detail.approvalProcessVos" :key="index" nodeTop="4">
							<template v-slot:node>
								<view class="u-node" :style="item.status != 1 || index == 0 ? 'background: #19be6b;' : ''">
									<u-icon :name="index == 0 ? 'yewuliufaqibeifen2x' : 'shenpi'" custom-prefix="custom-icon" color="#fff" :size="22"></u-icon>
								</view>
							</template>
							<template v-slot:content>
								<view>
									<view class="name">
										<text>{{item.opretorName}}</text>
										<u-tag v-if="item.status == 0" :text="item.opretorRoleName" type="warning" shape="circle" size="mini" mode="dark"/>
										<u-tag v-else :text="item.status == 1 ? '审批中' : item.status == 3 ? '审批通过' : '审批驳回'" :type="item.status == 1 ? 'info' : item.status == 3 ? 'success' : 'error'" shape="circle" size="mini" mode="dark"/>
									</view>
									<view class="desc" v-if="item.opretorDesc">{{item.opretorDesc}}</view>
									<view class="time">{{item.opretorTime}}</view>
								</view>
							</template>
						</u-time-line-item>
						
					</u-time-line>
				</view>
				
			</view>
			
		</view>
		
		<view class="btn-box" v-if="detail.reviewable">
			<view class="save" @click="refuseBox = true">拒绝</view>
			<view class="submit" @click="agree">同意</view>
		</view>
		
		<u-popup v-model="refuseBox" mode="center" width="650rpx" border-radius="20" >
			<view class="refuse-box">
				<view class="title">请输入驳回理由：</view>
				<u-input type="textarea" v-model="rejectReason" height="200" :border="true" />
				<view class="btns">
					<u-button type="info" size="medium" :custom-style="btnStyle" @click="refuseBox = false">取消</u-button>
					<u-button type="primary" size="medium" :custom-style="btnStyle" @click="refuse">确定</u-button>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				navbarBg:{'background':'rgba(0, 130, 255, 1)'},
				orderId: '',
				detail:null,
				summary:0,
				refuseBox:false,
				rejectReason:"",
			}
		},
		onLoad(options){
			this.orderId = options.id
			this.getOrderDetail()
		},
		methods:{
			getOrderDetail(){
				uni.showLoading({mask:true})
				this.$u.api.getOrderDetail(this.orderId).then(res => {
					if(res.code != 0){
						uni.hideLoading()
						this.$u.toast(res.msg)
						return false
					}
					this.detail = res.data
					this.detail.cementOrderVos.map(item => {
						this.summary += item.actTotal
					})
					uni.hideLoading()
				}).catch(()=>{uni.hideLoading()})
			},
			pageRefresh(){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.refresh();
			},
			agree(){
				uni.showModal({
					content:'确认通过此结算申请？',
					success: (res) => {
						if(res.confirm){
							this.review(3)
						}
					}
				})
			},
			refuse(){
				if(!this.rejectReason){
					this.$u.toast("请输入驳回理由")
					return false
				}
				this.review(2)
			},
			//审批
			review(status){
				uni.showLoading({
					mask:true
				})
				this.$u.api.applyOrderReview({
					rejectReason:this.rejectReason,
					id:this.orderId,
					status:status
				}).then(res => {
					if(res.code != 0){
						this.$u.toast(res.msg)
						return false
					}
					this.$u.toast('提交成功')
					uni.navigateBack({
						delta:1
					})
					this.pageRefresh()
					uni.hideLoading()
				}).catch(()=>{
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 30rpx;
		padding-bottom: calc(148rpx + env(safe-area-inset-bottom));
		&.no-btn{
			padding-bottom: 30rpx;
		}
		.box{
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;
			.title{
				font-size: 34rpx;
				font-weight: 800;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
				padding-bottom: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.list{
				.item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 20rpx;
					font-size: 28rpx;
					.label{
						color: #798188;
					}
					.value{
						color:#333;
						max-width: 400rpx;
					}
				}
			}
			.line{
				width: 100%;
				border-bottom: 1px dotted rgba(188, 198, 218, 0.6);
				position: relative;
				padding-top: 20rpx;
				&::before{
					content:'';
					position: absolute;
					width: 20rpx;
					height: 20rpx;
					border-radius: 0 100% 100% 0;
					background: #F0F2F6;
					top: 10rpx;
					left: -30rpx;
				}
				&::after{
					content:'';
					position: absolute;
					width: 20rpx;
					height: 20rpx;
					border-radius: 100% 0 0 100%;
					background: #F0F2F6;
					top: 10rpx;
					right: -30rpx;
				}
			}
			.concrete-list{
				.c-item{
					display: flex;
					flex-direction: column;
					padding: 20rpx 0;
					border-bottom:1px solid rgba(188, 198, 218, 0.3);
					.name{
						font-size: 28rpx;
						color: #1378FF;
						margin-bottom: 12rpx;
					}
					.bd{
						display: flex;
						align-items: center;
						view{
							width: 50%;
							font-size: 24rpx;
							color: #666D7F;
							text{
								font-size: 28rpx;
								color: #333;
							}
						}
					}
				}
				.summary{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-top: 24rpx;
					.t{
						font-size: 34rpx;
						font-weight: 600;
					}
					.v{
						font-size: 34rpx;
						font-weight: 600;
						color: #1378FF;
					}
				}
			}
		}
	}
	.timeline{
		padding: 30rpx 20rpx 0;
		.name{
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
			text{
				margin-right: 20rpx;
				font-size: 28rpx;
			}
		}
		.time{
			font-size: 24rpx;
			color: #798188;
		}
		.u-node {
			width: 34rpx;
			height: 34rpx;
			border-radius: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #d0d0d0;
		}
		.desc{
			color: rgba(150,150,150,1);
			margin-bottom: 6rpx;
		}
	}
	.btn-box{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx;
		font-size: 34rpx;
		color: #fff;
		text-align: center;
		line-height: 88rpx;
		padding-bottom:calc(30rpx + env(safe-area-inset-bottom)); 
		.save{
			width: 50%;
			height: 88rpx;
			background: #B6D5FF;
			border-radius: 16rpx 0px 0px 16rpx;
		}
		.submit{
			width: 50%;
			height: 88rpx;
			background: #1378FF;
			border-radius: 0px 16rpx 16rpx 0px;
		}
	}
	
</style>
